<template>
  <div>
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      width="30%"
      @close="onClose"
    >
      <el-form ref="form" :model="form" label-width="15%" label-position="right">
        <el-form-item label="模板类型">
          <el-select v-model="form.templateType" placeholder="请输入模板类型">
            <el-option label="同城寄" :value="1" />
            <el-option label="省内寄" :value="2" />
            <el-option label="经济区互寄" :value="3" />
            <el-option label="跨省" :value="4" />
          </el-select>
        </el-form-item>

        <el-form-item label="运送类型">
          <el-select v-model="form.transportType" placeholder="请输入运送类型">
            <el-option label="普快" :value="1" />
            <el-option label="特快" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市">
          <div v-if="form.templateType=='3'">
            <el-checkbox-group v-model="form.associatedCityList">
              <!-- array[string]
              关联城市：1-全国，2-京津冀，3-江浙沪，4-川渝，5-黑吉辽 必 -->
              <el-checkbox label="2">京津冀</el-checkbox>
              <el-checkbox label="3">江浙沪</el-checkbox>
              <el-checkbox label="4">川渝</el-checkbox>
              <el-checkbox label="5">黑吉辽</el-checkbox>
            </el-checkbox-group>
          </div>
          <span v-else>{{ "全国" }}</span>
        </el-form-item>
        <el-form-item label="首重价格">
          <el-input v-model="form.firstWeight" placeholder="请输入首重价格">
            <template slot="suffix"><span style="marginRight:20px;color:black;">元</span></template>
          </el-input>
        </el-form-item>
        <el-form-item label="续重价格">
          <el-input v-model="form.continuousWeight" placeholder="请输入续重价格">
            <template slot="suffix"><span style="marginRight:20px;color:black;">元</span></template>
          </el-input>
        </el-form-item>
        <el-form-item label="轻抛系数">
          <el-input v-model="form.lightThrowingCoefficient" placeholder="请输入轻抛系数" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { addEditTemplateAPI } from '@/api/manageData'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    editForm: {
      type: Object,
      default: null
    },
    title: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      form: {
        templateType: '',
        transportType: '',
        associatedCityList: ['1'], // 关联城市 默认全国1
        firstWeight: '', // 首重价格
        continuousWeight: '', // 续重价格
        lightThrowingCoefficient: ''// 轻抛系数
      }
    }
  },
  watch: {
    // 监听是否传入编辑数据
    async title(newValue, oldValue) {
      if (newValue === '编辑模板') {
        // console.log(newValue)
        this.form = this.editForm
      }
    }
  },
  methods: {
    async onSubmit() {
      // console.log('submit')
      try {
        const res = await addEditTemplateAPI()
        console.log(res)
      } catch (error) {
        // console.log(error)
      } finally {
        this.$message('初始化数据不允许更改')
      }
    },
    onClose() {
      this.form = {
        templateType: '',
        transportType: '',
        associatedCityList: ['1'], // 关联城市 默认全国1
        firstWeight: '', // 首重价格
        continuousWeight: '', // 续重价格
        lightThrowingCoefficient: ''// 轻抛系数
      }
      this.$emit('update:dialog-visible', false)
    }
  }

}
</script>

<style>
.el-form{
    margin: 0 auto;
}

</style>
